<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>文章详情</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/example.css"/>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.weui-navbar__item').on('click', function () {
                $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
                $.ajax({
                    type: "POST",
                    url: "/home/homeAjax",
                    async: false,
                    data: {
                        type:$(this).attr("tag")},
                    success: function (data) {
                        var dataPanelString = "";
                        console.log(data);
                        for(var i = 0;i<data.data.length;i++){
                            dataPanelString += " <a href='/home/articleInfo?id=" + data.data[i].id + "' class='weui-media-box weui-media-box_appmsg'>"+
                            "<div class='weui-media-box__hd'>"+
                            "<img class='weui-media-box__thumb' src='http://or5mz5dbj.bkt.clouddn.com/"+ data.data[i].img.toString()+"' alt=''>" +
                             " </div>"+
                                "<div class='weui-media-box__bd'>"+
                                "<h4 class='weui-media-box__title'>" + data.data[i].title.toString() + "</h4>"+
                                "<p class='weui-media-box__desc'>" + data.data[i].title.toString() + "</p>"+
                                "</div>"+
                                "</a>";
                        }
                        $("#dataPanel").empty();
                        $("#dataPanel").append(dataPanelString);
                    }
                });
            });
        });
    </script>

</head>
<body ontouchstart>
<div class="page__bd" style="height: 100%;">
    <div class="weui-tab">
        <div class="weui-navbar">
            <div class="weui-navbar__item weui-bar__item_on" tag="1">
                选项一
            </div>
            <div class="weui-navbar__item" tag="2">
                选项二
            </div>
            <div class="weui-navbar__item" tag="3">
                选项三
            </div>
        </div>
        <div class="weui-tab__panel" id="dataPanel">
            <c:forEach items="${articleList}" var="article" varStatus="vs">
                <a href="articleInfo?id=${article.id}" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="http://or5mz5dbj.bkt.clouddn.com/${article.img}" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">${article.title}</h4>
                        <p class="weui-media-box__desc">${article.title}</p>
                    </div>
                </a>
            </c:forEach>
        </div>
    </div>
</div>

</body>
</html>
